<template>
  <el-descriptions :title="props.title" :column="1" size="large">
    <el-descriptions-item label="海况等级">{{
      sourceObject.bgEnviProcessInfoVO?.waveLevel
    }}</el-descriptions-item>
    <el-descriptions-item label="其他">
      {{ sourceObject.bgEnviProcessInfoVO?.elseInfo }}
    </el-descriptions-item>
    <el-descriptions-item label="风速">
      {{ sourceObject.bgEnviProcessInfoVO?.windSpeed }}
    </el-descriptions-item>
    <el-descriptions-item label="风向">
      {{ sourceObject.bgEnviProcessInfoVO?.windDirection }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
const props = defineProps({
  title: { type: String, default: '数据处理前' },
  dealDataSources: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const sourceObject = ref<any>({});

watch(
  () => props.dealDataSources,
  (newValue, oldValue) => {
    sourceObject.value = newValue?.dynamicPara[0];
  }
);
</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions__label {
    width: 80px;
    display: inline-block;
    text-align: right;
  }
  .el-descriptions__content {
    color: #000;
  }
}
</style>
